<template>
  <section>
    <el-form :model="loginForm" label-width="100px" size="mini" :rules="rules" ref="loginForm" >
      <el-form-item label="手机号" prop="phone">
        <el-input type="email" v-model="loginForm.phone" auto-complete="off" style="width: 200px" placeholder="请输入手机号"  @blur="check"/>
        <div class="show-tip">
          {{showTip}}
        </div>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="loginForm.vcode" auto-complete="off" style="width: 200px" placeholder="请输入验证码"/>
        <el-button size="mini" @click="getCode" type="text" v-if="wait <= 0">获取验证码</el-button>
        <span v-else>重新发送({{wait}})</span>
      </el-form-item>
      <el-form-item>
        <el-button class="subBtn" type="primary" @click="submitForm('loginForm')" >登录</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import cookie from 'js-cookie'
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers(process.env.VUE_APP_MODULE_TITLE)
  export default {
    name: "phoneLogin",
    data(){
		// 手机号验证
		var checkPhone = (rule, value, callback) => {
		    const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
		    if (!value) {
		      return callback(new Error('电话号码不能为空'))
		    }
		    setTimeout(() => {
		      
		      if (!Number.isInteger(+value)) {
		        callback(new Error('请输入数字值'))
		      } else {
		        if (phoneReg.test(value)) {
		          callback()
		        } else {
		          callback(new Error('电话号码格式不正确'))
		        }
		      }
		    }, 100)
		  }
      return{
        loginForm:{},
        showTip:null,
        wait:0,
        timeCyc:null,
        rules: {
          phone: [
            {required: true, validator: checkPhone, trigger: 'blur' }
          ]
        }
      }
    },
    created(){
      let phone=cookie.get('loginPhone')
      console.log('?????????',phone)
      if(phone) this.loginForm.phone=phone
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      timeR(){
        if (this.wait === 0) {
          this.loginForm.vcode=''
        } else {
          console.log('this.wait',this.wait)
          this.wait--
          this.timeCyc=setTimeout(()=>{
              this.timeR()
            },1000)
        }
      },
      getCode(){
        this.fetch({
          api:'/auth/authorize/sendVerificationCode',
          data:this.loginForm,
          success:res=>{
            console.log('获取验证， ----',res)
            cookie.set('loginPhone',this.loginForm.phone)
            this.wait=30
            this.timeR(this.wait)
            this.$message({type:'success',message:'验证码发送成功，请查收！'})
          }
        })
      },
      check() {
        let e=this.loginForm.phone
        let reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
        if (e === "") {
          this.showTip='！请输入正确的手机号'
          return false
        } else if (!reg.test(e)) {
          this.showTip='！请输入正确的手机号'
          return false
        } else {
          return true
        }
      },
      submitForm(){
        console.log(this.loginForm,'phone--------')
        this.fetch({
          api:'/auth/authorize/phoneLogin',
          data:this.loginForm,
          success:res=>{
            console.log('手机验证码登陆成功--',res)
            clearTimeout(this.timeCyc)
            this.$emit('loginSuccess',res)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .show-tip{
    color:red;
    font-size: 10px;
  }
</style>
